<template>
  <avue-crud ref="crud"
             :data="data"
             :option="option">
    <template #menu-left="{}">
      <el-button type="primary"
                 @click="handleSwitch"
                 icon="el-icon-sort">切 换</el-button>
    </template>
  </avue-crud>
</template>

<script>
export default {
  data () {
    return {
      type: true,
      data: [
        {
          name: '张三',
          sex: '男',
          username: 'smallwei',
          password: 'smallwei'
        }, {
          name: '李四',
          sex: '女',
          username: 'avue',
          password: 'avue'
        }
      ],
      option: {},
      option1: {
        addBtn: false,
        column: [
          {
            label: '姓名',
            prop: 'name',
            search: true
          }
        ]
      },
      option2: {
        addBtn: false,
        column: [
          {
            label: '用户名',
            prop: 'username',
            search: true
          }, {
            label: '密码',
            prop: 'password',
            type: 'password',
            search: true
          }, {
            label: '姓名',
            prop: 'name',
            search: true
          }
        ]
      },
    };
  },
  mounted () {
    this.handleSwitch();
  },
  methods: {
    handleSwitch () {
      this.type = !this.type;
      if (this.type) {
        this.option = this.option1;
      } else {
        this.option = this.option2;
      }
      this.$refs.crud.refreshTable()
    }
  }
}
</script>